<template>
    <view class="headquarters-notices bg-f5 fullpage-min">
        <u-checkbox-group @change="checkboxGroupChange" style="width: 100%;">
            <view class="flex-row p-20 bg-ff m-top-20 ai-center" style="width: 100%;" v-for="(item, index) in list"
                :key="index">
                <view class="flex-row  " style="width: 8%;">
                    <u-checkbox v-if="item.status==1" @change="checkboxChange" v-model="item.checked" :name="item.id">
                    </u-checkbox>
                    <view v-else class=" size-24" style="color: #333;">
                        已读
                    </view>
                </view>
                <view class="flex-2 size-24 m-left-20">
                    <view class="size-28 omit">{{item.name}}</view>
                    <view class="text-right color-9">{{item.created_at}}</view>
                </view>
            </view>
        </u-checkbox-group>
        <view class="btn-area pos-absolute flex-row  jc-between ai-center">
            <u-checkbox   @change="checkedAll" v-model="checked">全选
            </u-checkbox>
            
            <view class="">
                <text class="m-right-40 color-6">已读</text>
                <text  class="m-right-40 color-9">删除</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                checked:false,
                list: [{
                    id:1,
                        name: '请仔细阅读门店须知',
                        created_at: '2019-08-10 07:00:00',
                        checked: false,
                        disabled: false,
                        status: 1
                    },
                    {
                        id:2,
                        name: '新店铺八折入驻',
                        created_at: '2019-08-10 10:00:00',
                        checked: false,
                        disabled: false,
                        status: 2
                    },

                ]
            }
        },
        methods: {
            // 选中某个复选框时，由checkbox时触发
            checkboxChange(e) {
                console.log(e);
            },
            // 选中任一checkbox时，由checkbox-group触发
            checkboxGroupChange(e) {
                console.log(e);
            },
            // 全选
            checkedAll() {
                this.checked= !  this.checked
                this.list.map(val => {
                    val.checked =  this.checked;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .headquarters-notices {
        .btn-area {
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            padding: 20rpx;
        }
    }
</style>
